<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="jquery.mobile-1.0b3.min.css">
    <link rel="stylesheet" href="css/style.css">
	
	<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
    <script src="jquery-1.6.4.min.js"></script>

    <script type="text/javascript" charset="utf-8">
	
	function onBodyLoad() {		
		document.addEventListener("deviceready",onDeviceReady,false);
		//Android only
		document.addEventListener("backbutton", function() { $.mobile.changePage($('#persons_page')); }, false);
        document.addEventListener("menubutton", function() { $.mobile.changePage($('#synchro_page')); }, false);
	}
	
	function onDeviceReady() {

        PhoneExt.load();
        Data.load();
        Context.listPersons.load();
        
        $(document).ready(function () {		
                Context.load();
                Context.updateListPersons();
        });
	}
    
    </script>
    <script src="jquery.mobile-1.0b3.min.js"></script>

    <script src="js/common_forms.js"></script>
    <script src="js/mobile.js"></script>
    <script src="js/data.js"></script>
    <script src="js/ajax.js"></script>
    <script src="js/phone.js"></script>
        
  </head>
  <body onload="onBodyLoad()">
  	  
      <section id="persons_page" data-role="page">
          <header data-role="header" data-nobackbtn="true">
              <a href="#synchro_page" data-transition="pop" data-icon="gear" class="ui-btn-left">Sync</a>
              <h1>Persons</h1>
              <a href="#form_person_page" data-transition="pop" data-icon="plus" class="ui-btn-right">Add</a>
          </header> 
          <div class="msg"><span class="ajaxMsg"></span> <span class="ajaxErr"></span></div>
          <section data-role="content">
              <ul id="listPersons" data-role="listview" data-inset="true" data-split-icon="delete">
                  
              </ul>
          </section>
      </section>
      
      <section id="form_person_page" data-role="page">
          <header data-role="header" data-nobackbtn="true">
              <a href="#persons_page" data-icon="back" class="ui-btn-left">Back</a>
              <h1>Add Person</h1>
          </header> 
          <section data-role="content">
              <img style="display:none;" id="image" src="" class="photo" />
              <div id="photoGrp" style="display:none;" data-inline="true">
                  <a href="javascript:PhoneExt.image()" data-role="button" data-icon="star">Image</a>
                  <a href="javascript:PhoneExt.photo()" data-role="button" data-icon="star">Photo</a>
              </div>
              <form id="form_person" action="javascript:Context.submitPerson()">
                  <fieldset data-role="fieldcontain">
                      <label for="firstName">Firstname <span class="required">*<span></label>
                      <input id="firstName" type="text" name="firstName" required></input>
                  </fieldset>
                  <fieldset data-role="fieldcontain">
                      <label for="lastName">Lastname <span class="required">*<span></label>
                      <input id="lastName" type="text" name="lastName" required></input>	
                  </fieldset>
                  <fieldset id="phoneGrp" style="display:none;" data-role="controlgroup">
                      <label for="addContact">Add to phone contact</label>
                      <input id="addContact" type="checkbox" name="addContact" value="add" checked/>
                  </fieldset>
                  <input id="personBt" type="submit" name="personBt" value="Add"></input>
              </form> 
          </section>
      </section>
      
      <section id="tasks_page" data-role="page">
          <header data-role="header" data-nobackbtn="true">
              <a href="#persons_page" data-icon="back" class="ui-btn-left">Back</a>
              <h1>Tasks</h1>
              <a href="#form_task_page" data-icon="plus" class="ui-btn-right">Add</a>
          </header> 
          <div class="msg"><span class="ajaxMsg" /> <span class="ajaxErr" /></div>
          <section data-role="content">
              <ul id="listTasks" data-role="listview" data-inset="true" data-filter="true">
                  
              </ul>
          </section>
      </section>
      
      <section id="form_task_page" data-role="page">
          <header data-role="header" data-nobackbtn="true">
              <a href="#tasks_page" data-icon="back" class="ui-btn-left">Back</a>
              <h1>Add Task</h1>
          </header> 
          <section data-role="content">
              <form id="form_task" action="javascript:Context.submitTask()">
                  <fieldset data-role="fieldcontain">
                      <label for="label">Label <span class="required">*<span></label>
                      <input type="text" id="label" name="label" required></input>
                  </fieldset>
                  <fieldset data-role="fieldcontain">
                      <label for="description">Description <span class="required">*<span></label>
                      <textarea id="description" name="description" cols="40" rows="8" required></textarea>
                  </fieldset>
                  <input id="taskBt" type="submit" name="taskBt" value="Add"></input>
              </form>
          </section>
      </section>
      
      <section id="update_task_page" data-role="page">
          <header data-role="header" data-nobackbtn="true">
              <a href="#tasks_page" data-icon="back" class="ui-btn-left">Back</a>
              <h1>Update Task</h1>
              <a id="close_task_link" href="javascript:Context.closeTask()" data-icon="delete" class="ui-btn-right">Close</a>
          </header> 
          <section data-role="content">
              <form id="update_form_task" action="javascript:Context.submitUpdtTask()">
                  <fieldset data-role="fieldcontain">
                      <label for="ulabel">Label <span class="required">*<span></label>
                      <input type="text" id="ulabel" name="ulabel" required></input>
                  </fieldset>
                  <fieldset data-role="fieldcontain">
                      <label for="udescription">Description <span class="required">*<span></label>
                      <textarea id="udescription" name="udescription" cols="40" rows="8" required></textarea>
                  </fieldset>
                  <input id="taskUpdateBt" type="submit" name="taskBt" value="Update"></input>
              </form>
          </section>
      </section>
      
      <section id="synchro_page" data-role="page">
          <header data-role="header" data-nobackbtn="true">
              <a href="#persons_page" data-icon="back" class="ui-btn-left">Back</a>
              <h1>Export to web</h1>
          </header> 
          <section data-role="content">
              <div class="msg"><span class="ajaxMsg" /> <span class="ajaxErr" /></div>
              <form>
                  <fieldset data-role="controlgroup" data-type="horizontal" > 
                      <legend>Active Web sync:</legend>
                      <input type="radio" name="activeWebsyncRd" id="activeWebsyncRd1" value="yes"  />
                      <label for="activeWebsyncRd1">Yes</label>
                      
                      <input type="radio" name="activeWebsyncRd" id="activeWebsyncRd2" value="no" checked="checked" />
                      <label for="activeWebsyncRd2">No</label>
                  </fieldset>
                  <fieldset data-role="controlgroup">
                      Export all the local datas (except pictures) to the web application.
                      <a href="javascript:Context.exportDatas()" data-role="button">Yes</a>
                      <a href="#persons_page" data-role="button">No</a>
                  </fieldset>
              </form>
              
          </section>
      </section>
      
  </body>
</html>
